<template>
  <div class="region" style="height: 100%">
    <div class="pageTitleSubTitle">
      <div class="title">地区管理</div>
    </div>
    <div class="cityComponent">
      <div class="cityCon">
        <div class="cityTit">
          <span>省</span>
          <a-button v-if="configJurisdiction.add" type="primary" @click="appendCity(1)"><a-icon type="plus" />添加省</a-button>
        </div>
        <div class="cityList">
          <div v-for="(item,index) in city" :class="cityIndex === index?'active city':'city'" @click="cityChange(index)">
            <div class="city_name">{{item.city_name}}</div>
            <div class="city_btn" v-if="cityIndex === index">
              <span v-if="configJurisdiction.update" @click="editCity(index,1,item.city_name,item.id)">编辑</span>
              <span v-if="configJurisdiction.del" @click="removeCity(item.id)">删除</span>
            </div>
          </div>
        </div>
      </div>
      <div class="cityCon">
        <div class="cityTit">
          <span>市</span>
          <a-button v-if="configJurisdiction.add" type="primary" @click="appendCity(2)"><a-icon type="plus" />添加市</a-button>
        </div>
        <div class="cityList">
          <div v-for="(item,index) in shiList" :class="shiIndex === index?'active city':'city'" @click="shiChange(index)">
            <div class="city_name">{{item.city_name}}</div>
            <div class="city_btn" v-if="shiIndex === index">
              <span v-if="configJurisdiction.update" @click="editCity(index,2,item.city_name,item.id)">编辑</span>
              <span v-if="configJurisdiction.del" @click="removeCity(item.id)">删除</span>
            </div>
          </div>
        </div>
      </div>
      <div class="cityCon">
        <div class="cityTit">
          <span>区</span>
          <a-button v-if="configJurisdiction.add" type="primary" @click="appendCity(3)"><a-icon type="plus" />添加区</a-button>
        </div>
        <div class="cityList">
          <div v-for="(item,index) in quList" :class="quIndex === index?'active city':'city'" @click="quChange(index)">
            <div class="city_name">{{item.city_name}}</div>
            <div class="city_btn" v-if="quIndex === index">
              <span v-if="configJurisdiction.update" @click="editCity(index,3,item.city_name,item.id)">编辑</span>
              <span v-if="configJurisdiction.del" @click="removeCity(item.id)">删除</span>
            </div>
          </div>
        </div>
      </div>
      <div class="cityCon">
        <div class="cityTit">
          <span>街道</span>
          <a-button v-if="configJurisdiction.add" type="primary" @click="appendCity(4)"><a-icon type="plus" />添加街道</a-button>
        </div>
        <div class="cityList">
          <div v-for="(item,index) in jieList" :class="jieIndex === index?'active city':'city'" @click="jieChange(index)">
            <div class="city_name">{{item.city_name}}</div>
            <div class="city_btn" v-if="jieIndex === index">
              <span v-if="configJurisdiction.update" @click="editCity(index,4,item.city_name,item.id)">编辑</span>
              <span v-if="configJurisdiction.del" @click="removeCity(item.id)">删除</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a-modal
      v-model="visible"
      :title="title"
      cancelText="关闭"
      okText="保存">
      <div style="display:flex;align-items:center">
        <span style="margin-right:16px">{{type === 1?'省':type === 2?'市':type === 3?'区':'街道'}}:</span>
        <a-input v-model="value" style="width: 200px" />
      </div>
      <template slot="footer">
        <a-button class="modalCloseBtn" @click="modalChange(1)">关闭</a-button>
        <a-button class="modalConfigBtn" type="primary" :loading="loading" @click="modalChange(2)">保存</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
  export default {
    name:'region',
    data(){
      return {
        city:[],
        cityIndex:0,
        cityPid:0,
        shiList:[],
        shiIndex:0,
        shiPid:0,
        quList:[],
        quIndex:0,
        quPid:0,
        jieList:[],
        jieIndex:0,
        jiePid:0,
        visible:false,
        type:1,
        title:'添加省',
        value:'',
        loading:false,
        id:0,
        // pid	是	int	上级id 省为1 国家为0
        // city_name	是	string	名称
        // type	是	int	jia角色描述 0国家 1省 2市 3县 4街道
        jurisdiction:[
          { key:'admin-citie-add', back:'add'},
          { key:'admin-citie-update', back:'update'},
          { key:'admin-citie-del', back:'del'},
        ],
        configJurisdiction:{}
      }
    },
    created() {
      this.getList();
      this.configJurisdiction = this.getJurisdiction(2,this.jurisdiction);

    },
    methods:{
      editCity(index,type,name,id){
        this.type = type;
        this.value = name;
        this.title = type === 1?'编辑省':type === 2?'编辑市':type === 3?'编辑区':'编辑街道';
        this.visible = true;
        this.id = id;
        this.tabs = 2;
      },
      removeCity(id){
        this.$confirm({
          title: '确定删除当前地址?',
          cancelText: '取消',
          okText:'删除',
          onOk:()=> {
            this.Api.delCities({},id).then(res=>{
              if(res.code !== 200) return this.$message.info(res.msg);
              this.$message.success(res.msg);
              this.getList()
            })
          }
        })
      },
      modalChange(type){
        this.loading = true;
        let data = {
          type: this.type,
          city_name: this.value,
          pid: this.type === 1?1:this.type === 2?this.cityPid:this.type === 3?this.shiPid:this.quPid
        };
        if(type === 1) return this.visible = false;
        if(this.tabs === 1) return this.Api.postCities(data).then(res=>{
          if(res.code !== 200){
           this.$message.info(res.msg);
           return this.loading = false;
          }
          this.$message.success(res.msg);
          this.getList();
          this.loading = false;
          this.visible = false;
        });
        this.Api.putCities(data,this.id).then(res=>{
          if(res.code !== 200){
            this.$message.info(res.msg);
            return this.loading = false
          }
          this.$message.success(res.msg);
          this.getList();
          this.loading = false;
          this.visible = false;
        })
      },
      appendCity(type){
        this.type = type;
        this.title = type === 1?'添加省':type === 2?'添加市':type === 3?'添加区':'添加街道';
        this.visible = true;
        this.tabs = 1;
        this.value = '';
      },
      cityChange(index){
        this.cityIndex = index;
        this.shiList = this.city[index].city;
        this.cityPid = this.city[index].id;

        this.shiIndex = 0;
        this.quList = this.city[index].city[0].county;
        this.shiPid = this.city[index].city[0].id;

        this.quIndex = 0;
        this.jieList = this.city[index].city[0].county[0].street;
        this.quPid = this.city[index].city[0].county[0].id
      },
      shiChange(index){
        this.shiIndex = index;
        this.quList = this.shiList[index].county;
        this.shiPid = this.shiList[index].id;

        this.quIndex = 0;
        this.jieList = this.shiList[index].county.street;
        this.quPid = this.shiList[index].county.id
      },
      quChange(index){
        this.quIndex = index;
        this.jieList = this.quList[index].street;
        this.quPid = this.quList[index].id
      },
      jieChange(index){
        this.jieIndex = index
      },
      getList(){
        this.Api.cities().then(res=>{
          if(res.code !== 200) return;
          this.city = res.data;
          this.cityPid = res.data[this.cityIndex].id;
          this.shiList = res.data[this.cityIndex].city;
          this.shiPid = res.data[this.cityIndex].city[this.shiIndex].id;
          this.quList = res.data[this.cityIndex].city[this.shiIndex].county;
          this.quPid = res.data[this.cityIndex].city[this.shiIndex].county[this.quIndex].id;
          this.jieList = res.data[this.cityIndex].city[this.shiIndex].county[this.quIndex].street
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .region{
    .cityComponent{
      display: flex;
      .cityCon{
        width: calc(25% - 16px);
        background: #ffffff;
        .cityList{
          height: calc(100% - 50px);
          padding: 24px;
          box-sizing: border-box;
          overflow-y: scroll;
          .active{
            color:#006AFF;
            display: flex;
            justify-content: space-between;
            .city_name{
              font-size: 14px;
              font-weight: bold;
            }
            .city_btn{
              span{
                margin-right: 16px;
              }
            }
          }
          .city{
            padding: 12px 0;
            cursor: pointer;
          }
          .city:nth-child(1){
            padding-top: 0;
          }
        }
        .cityList::-webkit-scrollbar {display:none}
        .cityTit{
          height: 55px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 24px;
          box-sizing: border-box;
          border-bottom: 1px solid #E9E9E9;
          span{
            color: #333333;
            font-size: 18px;
            font-weight: bold;
          }
        }
        .city{

        }
      }
    }
  }
</style>
